<template>
<div>
    <h4>商品清单如下:</h4>
    <p v-for="(item,index) in foodsList" :key="index">{{item.shopName}}:{{item.price}}元/份</p>
    <br>
    <h4>请选择购买数量:</h4>
    <Foods v-for="(item,index) in foodsList" :key="index" :name="item.shopName" :count="item.count" :index="index" @addCount="addCountPar" @subCount="subCountPar"/>
    <h4>总价:{{totalPrice.toFixed(2)}}</h4>
</div>
</template>

<script>
import Foods from "./components/Foods.vue"
export default {
  components:{
    Foods,
  },
  data() {
    return {
      foodsList: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  methods:{
    addCountPar(i){
      this.foodsList[i].count++
    },
    subCountPar(i){
      if(this.foodsList[i].count==0){
        return
      }
      this.foodsList[i].count--
    }
  },
  computed:{
    totalPrice(){
     return this.foodsList.reduce((accu,item)=>{
       return accu+=item.price*item.count
     },0)
    }
  }
};
</script>

<style>
</style>